<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { TableRowSelection, Notification } from '@arco-design/web-vue';
import { getUserJob } from '@/utils/auth';
import { useBooleanStore } from '@/store';
import {
  searchParamsByDelivery,
  creatReturnSales,
} from '@/api/material-receipt';
import { creatReturnSalesParams } from '@/api/material-receipt/types';

const booleanStore = useBooleanStore();
const hStyle = ref({
  'background-color': booleanStore.color,
  'border-radius': booleanStore.borderRadius,
});
const showDrawer = ref<boolean>(false);

const columns: any[] = [
  {
    title: '交接单号',
    dataIndex: 'deliveryPlanCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '图号',
    dataIndex: 'itemCode',
  },
  {
    title: '物料名称',
    dataIndex: 'mdsItemDTOList[0].itemName',
  },
  {
    title: '质量编号',
    dataIndex: 'qualityCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '合格证号',
    dataIndex: 'supplyRegularNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '配送数量',
    dataIndex: 'deliveryQty',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '最大可退数量',
    dataIndex: 'maxQty',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '当前可用数量',
    dataIndex: 'usableQty',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '机型',
    dataIndex: 'productCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '批次',
    dataIndex: 'batchNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '起始架次',
    dataIndex: 'startLotNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '截止架次',
    dataIndex: 'endLotNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '接收日期',
    dataIndex: 'receiveDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '接收单位',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '接收人',
    dataIndex: 'receiveEmpCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '接收备注',
    dataIndex: 'receiveRemark',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '配送数量',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '配送日期',
    dataIndex: 'deliveryDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '配送单位',
    dataIndex: 'deliveryDeptId',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '配送人',
    dataIndex: 'deliveryUserId',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '移交方意见',
    dataIndex: 'deliveryNote',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '单机数',
    dataIndex: 'itemPlaneQty',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '计量单位',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '牌号',
    dataIndex: 'marque',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '规格',
    dataIndex: 'specs',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '父件图号',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '成品型号',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '父件型号',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: 'AO代码',
    dataIndex: 'aoNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '限用机型',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '限用批次',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '限用架次',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '限用说明',
    dataIndex: 'zanwu',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '油封期',
    dataIndex: 'sealDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '最长保管期',
    dataIndex: 'maxStorageDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '交接ID',
    dataIndex: 'wmsDeliveryPlanId',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
];
const localTableData = ref<any[]>([]);
const rowSelection: TableRowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});
const selectedKeys = ref<any>([]);

const batchNo = ref<string>('');
const productCode = ref<string>('');
const startLotNo = ref<string>('');
const endLotNo = ref<string>('');

const itemCode = ref<string>('');
const qualityCode = ref<string>('');
const deliveryStatus = ref<string>('');
const deliveryType = ref<string>('');

const deliveryPlanCode = ref<string>('');
const wmsDeliveryPlanId = ref<string>('');
const deliveryOrgCode = ref<string>('');
const receiveOrgCode = ref<string>('');

// 数据库一共有多少条
const total = ref<number>(0);
const pageNumber = ref<number>(1);
const pageSize = ref<number>(10);

// 退库单信息
const returnType = ref<string>('');
const usableQty = ref<string>('');
const returnBasis = ref<string>('');
const belongCompany = ref<string>('');

const faultPhenomenon = ref<string>('');
const appearanceStatus = ref<string>('');
const supportingStatus = ref<string>('');
const MaxStoragePeriod = ref<string>('');

const oilSealPeriod = ref<string>('');
const remark = ref<string>('');
const value5 = ref<string>('是');

const flowQueryData = ref({
  searchParams: computed(() => ({
    batchNo: batchNo.value,
    productCode: productCode.value,
    startLotNo: startLotNo.value,
    endLotNo: endLotNo.value,
    itemCode: itemCode.value,
    qualityCode: qualityCode.value,
    deliveryStatus: deliveryStatus.value,
    deliveryType: deliveryType.value,
    deliveryPlanCode: deliveryPlanCode.value,
    wmsDeliveryPlanId: wmsDeliveryPlanId.value,
    deliveryOrgCode: deliveryOrgCode.value,
    receiveOrgCode: receiveOrgCode.value,
  })),
  pageParameter: computed(() => ({
    rows: pageSize.value,
    page: pageNumber.value,
  })),
});

async function search() {
  const data = await searchParamsByDelivery(flowQueryData.value);
  localTableData.value = data?.responseBody?.result || [];
  total.value = data?.responseBody?.pageParameter?.totalCount || 0;
}

function reset() {
  batchNo.value = '';
  productCode.value = '';
  startLotNo.value = '';
  endLotNo.value = '';

  itemCode.value = '';
  qualityCode.value = '';
  deliveryStatus.value = '';
  deliveryType.value = '';

  deliveryPlanCode.value = '';
  wmsDeliveryPlanId.value = '';
  deliveryOrgCode.value = '';
  receiveOrgCode.value = '';
  // search();
}
// 监听弹框
watch(
  () => booleanStore.boolValue,
  (newValue: boolean) => {
    if (!newValue) {
      showDrawer.value = newValue;
      localTableData.value = [];
      total.value = 0;
      return;
    }
    if (booleanStore.num === 2) {
      showDrawer.value = newValue;
      // search();
      reset();
      returnType.value = '';
      usableQty.value = '';
      returnBasis.value = '';
      belongCompany.value = '';
      faultPhenomenon.value = '';
      appearanceStatus.value = '';
      supportingStatus.value = '';
      MaxStoragePeriod.value = '';
      oilSealPeriod.value = '';
      remark.value = '';
      value5.value = '是';
      localTableData.value = [];
      selectedKeys.value = [];
    }
  }
);

function afterVisibleChange(val: any) {
  if (!val) {
    booleanStore.toggleBool(2);
  }
}
function handleCancel() {
  booleanStore.toggleBool(2);
}
const getUserJobNumber = ref<any>(getUserJob());
async function handleOk() {
  const selectedData = localTableData.value.filter((item: any) =>
    selectedKeys.value.includes(item.wmsDeliveryPlanId)
  );
  // if (selectedData.length !== 1) {
  //   Notification.warning({
  //     title: '提示',
  //     content: '请只选择一条数据',
  //     closable: true,
  //   });
  //   return;
  // }
  const infos = ref<creatReturnSalesParams[]>([]);
  infos.value = selectedData.map((_) => ({
    account: getUserJobNumber.value,
    empinfoid: getUserJobNumber.value,
    text: '',
    departid: '',
    itemCode: _.itemCode,
    wmsDeliveryPlanId: _.wmsDeliveryPlanId,
    returnType: returnType.value || '1',
    returnQty: usableQty.value,
    accordingNo: returnBasis.value,
    failureDesc: faultPhenomenon.value,
    appearanceStatus: appearanceStatus.value,
    equipStatus: supportingStatus.value,
    maxStorageDate: MaxStoragePeriod.value,
    sealDate: oilSealPeriod.value,
    remark: remark.value,
    ynWorkLineFlag: value5.value,
  }));
  // const info = {
  //   account: getUserJobNumber.value,
  //   empinfoid: getUserJobNumber.value,
  //   text: '',
  //   departid: '',
  //   itemCode: selectedData[0].itemCode,
  //   wmsDeliveryPlanId: selectedData[0].wmsDeliveryPlanId,
  //   returnType: returnType.value || '1',
  //   returnQty: usableQty.value,
  //   accordingNo: returnBasis.value,
  //   failureDesc: faultPhenomenon.value,
  //   appearanceStatus: appearanceStatus.value,
  //   equipStatus: supportingStatus.value,
  //   maxStorageDate: MaxStoragePeriod.value,
  //   sealDate: oilSealPeriod.value,
  //   remark: remark.value,
  //   ynWorkLineFlag: value5.value,
  // };
  const data: any = await creatReturnSales(infos.value);
  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: data.message,
      closable: true,
    });
    reset();
    booleanStore.toggleBool(2);
    booleanStore.watchUpdate(5);
  } else {
    Notification.error({
      title: '失败',
      content: data.message,
      closable: true,
    });
  }
  
}
function change(e: any) {
  pageNumber.value = e;
}
function changeSize(e: any) {
  pageSize.value = e;
}
watch([pageNumber, pageSize], () => {
  search();
});
watch(
  selectedKeys,
  () => {
    const selectedData: any[] = localTableData.value.filter((item) =>
      selectedKeys.value.includes(item.wmsDeliveryPlanId)
    );
    // usableQty.value = selectedData[0]?.usableQty;
  },
  { deep: true }
);
</script>

<template>
  <a-drawer
    width="70%"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 零件所在单位发起 </template>
    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">查询条件</div>
      </template>
      <!-- 第一行 -->
      <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input v-model="batchNo" placeholder="批次" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="productCode" placeholder="机型" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="startLotNo" placeholder="起始架次" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="endLotNo" placeholder="截止架次" size="large" />
          </div>
        </a-col>
      </a-row>

      <!-- 第二行 -->
      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input v-model="itemCode" placeholder="图号" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="qualityCode"
              placeholder="质量编号"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="deliveryStatus"
              placeholder="交接状态"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="deliveryType"
              placeholder="交接类型"
              size="large"
            />
          </div>
        </a-col>
      </a-row>
      <!-- 第三行 -->
      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input
              v-model="deliveryPlanCode"
              placeholder="交接单号"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="wmsDeliveryPlanId"
              placeholder="交接单ID"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="deliveryOrgCode"
              placeholder="移交单位简码"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="receiveOrgCode"
              placeholder="接收单位简码"
              size="large"
            />
          </div>
        </a-col>
      </a-row>

      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <a-button type="primary" size="large" @click="search">查询</a-button>
          <a-button class="btn-reset" size="large" @click="reset"
            >重置</a-button
          >
        </a-col>
      </a-row>
    </a-card>
    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">交接单数据</div>
      </template>
      <a-table
        v-model:selectedKeys="selectedKeys"
        :stripe="true"
        class="top-table"
        :pagination="false"
        row-key="wmsDeliveryPlanId"
        :columns="columns"
        :data="localTableData"
        :row-selection="rowSelection"
      >
      </a-table>
      <div class="page-position">
        <a-pagination
          :total="total"
          :current="pageNumber"
          :page-size="pageSize"
          show-total
          show-jumper
          show-page-size
          @change="change"
          @update:page-size="changeSize"
        />
      </div>
    </a-card>
    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">退库单信息</div>
      </template>
      <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-select v-model="returnType" placeholder="退库类型" size="large">
              <a-option value="1">无故障退库</a-option>
              <a-option value="2">执行质量通知单退库</a-option>
              <a-option value="3">故障单退库</a-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="usableQty" placeholder="退库数量" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="returnBasis"
              placeholder="退库依据"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="belongCompany"
              placeholder="零件所在单位"
              size="large"
            />
          </div>
        </a-col>
      </a-row>

      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input
              v-model="faultPhenomenon"
              placeholder="故障现象"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="appearanceStatus"
              placeholder="实物外观状态"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="supportingStatus"
              placeholder="实物配套状态"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-date-picker
              v-model="MaxStoragePeriod"
              style="width: 100%"
              placeholder="最长保管期"
              size="large"
            />
          </div>
        </a-col>
      </a-row>
      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-date-picker
              v-model="oilSealPeriod"
              style="width: 100%"
              placeholder="油封期"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="remark" placeholder="备注" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-select
              v-model="value5"
              placeholder="是否按原分工生成返修计划"
              size="large"
            >
              <a-option value="是">是否按原分工生成返修计划:是</a-option>
              <a-option value="否">是否按原分工生成返修计划:否</a-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <template #footer>
      <div class="flex-btn">
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button class="btn-reset" @click="handleCancel">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<style scoped>
.top-table {
  white-space: nowrap;
}
.row-top {
  margin-top: 10px;
}
.btn-reset {
  margin-left: 10px;
}
.font {
  font-size: 20px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.page-position {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
